@import url("https://fonts.googleapis.com/css2?family=Bakbak+One&family=Open+Sans:wght@300;500&display=swap");

body {
  background-color: #393e46;
}

h1 {
  font-family: "Bakbak One", cursive;
  color: #f5f5f5;
  text-align: center;
  font-size: 5vh;
}

.tictactoe {
  margin: 7vh auto auto auto;
  width: fit-content;
  word-spacing: 0;
  line-height: 0;
  font-size: 0;
  height: 50vh;
}

.top-left {
  border: solid;
  border-top: none;
  border-left: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  padding: 0;
  margin: 0;
  float: left;
}

.top-middle {
  border: solid;
  border-top: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  padding: 0;
  margin: 0;
  float: left;
}

.top-right {
  border: solid;
  border-top: none;
  border-right: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  padding: 0;
  float: left;
}

.middle-left {
  border: solid;
  border-left: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.middle-middle {
  border: solid;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.middle-right {
  border: solid;
  border-right: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.bottom-left {
  border: solid;
  border-left: none;
  border-bottom: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.bottom-middle {
  border: solid;
  border-bottom: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.bottom-right {
  border: solid;
  border-right: none;
  border-bottom: none;
  border-color: red;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  float: left;
}

.top-left-image {
  visibility: hidden;
  position: relative;
  top: 5vh;
  left: 5vh;
}
.top-middle-image {
  visibility: hidden;
  position: relative;
  top: 5vh;
  left: 5vh;
}
.top-right-image {
  visibility: hidden;
  position: relative;
  top: 5vh;
  left: 5vh;
}
.middle-left-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}
.middle-middle-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}
.middle-right-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}
.bottom-left-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}
.bottom-middle-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}
.bottom-right-image {
  position: relative;
  top: 5vh;
  left: 5vh;
  visibility: hidden;
}

.winner {
  color: white;
  width: 100%;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: large;
  line-height: 8px;
  visibility: hidden;
}

.footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-family: "Open Sans", sans-serif;
  color: #f5f5f5;
  background-color: black;
  padding: 10px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}